<template>
  <div style="">
    <a-form
      :form="form"
      :label-col="{ span: 5 }"
      :wrapper-col="{ span: 12 }"
      @submit="handleSubmit"
    >
      <a-form-item label="用户名称">
        <a-input
          allow-clear
          placeholder="请输入用户名称"
          v-decorator="[
            'userName',
            {
              rules: [
                { required: true, message: '请输入用户名称!' },
              ],
            },
          ]"
        />
      </a-form-item>
      <a-form-item label="登录名称">
        <a-input
          allow-clear
          placeholder="请输入登录名称"
          v-decorator="[
            'loginName',
            {
              rules: [{ required: true, message: '请输入登录名称!' }],
            },
          ]"
        />
      </a-form-item>
      <a-form-item label="登录密码">
        <a-input
          allow-clear
          placeholder="请输入登录密码"
          v-decorator="[
            'loginPwd',
            {
              rules: [
                { required: true, message: '请输入登录密码!' },
              ],
            },
          ]"
        />
      </a-form-item>
      <a-form-item label="钱包密码">
        <a-input
          allow-clear
          placeholder="请输入钱包密码"
          v-decorator="[
            'password',
            {
              rules: [
                { required: true, message: '请输入钱包密码!' },
              ],
            },
          ]"
        />
      </a-form-item>
      <a-form-item label="备注信息">
        <a-textarea
          :autosize="{ minRows: 2, maxRows: 5 }"
          allow-clear
          placeholder="请输入备注信息"
          v-decorator="[
            'note',
            {
              rules: [
                { required: false, message: 'Please input your binary code!' },
              ],
            },
          ]"
        />
      </a-form-item>
      <!-- <a-form-item label="Gender">
        <a-select
          v-decorator="[
            'gender',
            {
              rules: [{ required: true, message: 'Please select your gender!' }],
            },
          ]"
          placeholder="Select a option and change input text above"
          @change="handleSelectChange"
        >
          <a-select-option value="male"> male </a-select-option>
          <a-select-option value="female"> female </a-select-option>
        </a-select>
      </a-form-item> -->
      <a-form-item :wrapper-col="{ span: 12, offset: 5 }">
        <a-button type="primary" html-type="submit" :disabled="submitting">
          新增用户
        </a-button>
      </a-form-item>
    </a-form>
  </div>


</template>

<script>
import Constant from "../utils/Constant";
export default {
  data() {
    return {
      authorization:
        "0x6984ba3f2c75c31032b60e475bb4b2102bd0ff1cdc4d1bc560a95309ed34b491_",
      userType: 1,
      formLayout: "horizontal",
      form: this.$form.createForm(this, { name: "coordinated" }),

      submitting: false,
    };
  },
  created() {
    this.authorization = localStorage.getItem("authorization");
    this.userType = localStorage.getItem("userType");
  },
  methods: {
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log("Received values of form: ", values);
          console.log(this.form);
          this.submitting = true;
          this.newUserInfo(values);
        }
      });
    },
    handleSelectChange(value) {
      console.log(value);
      this.form.setFieldsValue({
        note: `Hi, ${value === "male" ? "man" : "lady"}!`,
      });
    },
    newUserInfo(formValues) {
      let headers = {};
      headers.headers = { authorization: this.authorization };

      let url = Constant.ACCOUNT_USERINFOS_URL;
      let params = {};
      params.userName = formValues.userName;
      params.loginName = formValues.loginName;
      params.loginPwd = formValues.loginPwd;
      params.password = formValues.password;
      params.note = formValues.note;

      // this.submitting = true;
      this.$http.post(url, params, headers).then(
        (resp) => {
          // console.log(resp);
          if (resp.data.code === "01") {
            //refresh user list
            this.$message.success("用户新增成功");
            this.form.resetFields();
          } else {
            this.$message.error(resp.data.message);
          }
          this.submitting = false;
        },
        (err) => {
          console.log(err);
          this.submitting = false;
        }
      );
    },
  },
};
</script>
